@mixin extendable-border($top-bottom-width: 4px, $left-right-width: 100vw, $offset: -4px) {
  left: 0;
  width: $left-right-width;
  &:before,
  &:after {
    content: '';
    display: inline-block;
    height: $top-bottom-width;
    width: $left-right-width;
    position: absolute;
  }

  &::before {
    top: $offset;
    left: 0;
  }

  &::after {
    bottom: $offset;
    left: 0;
  }
}

@mixin vertical-border($height: 100vh, $width: 4px, $offset: -4px) {
  top: 0;
  height: $height;

  &:before,
  &:after {
    content: '';
    display: inline-block;
    width: $width;
    height: $height;
    position: absolute;
  }

  &::before {
    left: $offset;
    top: 0;
  }

  &::after {
    right: $offset;
    top: 0;
  }
}
